<template>
	<kui-page :custom-header="false">
		<template v-slot:body>
			<kui-config-provider font-size="16px" color="#666">
				<view class="kui-mt-3">
					<kui-text>基本用法</kui-text>
					<kui-container radius="10px" background-color="#FFFFFF">
						<kui-button type="primary" block @click="showOverlay()">显示遮罩层</kui-button>
					</kui-container>
				</view>
				<view class="kui-mt-5">
					<kui-text>自定义遮罩透明度</kui-text>
					<kui-container radius="10px" background-color="#FFFFFF">
						<kui-button type="primary" block @click="showOverlay(0.4)">显示遮罩层</kui-button>
					</kui-container>
				</view>
				<view class="kui-mt-5">
					<kui-text>自定义插槽内容</kui-text>
					<kui-container radius="10px" background-color="#FFFFFF">
						<kui-button type="primary" block @click="showOverlay(0.6, 'content')">显示遮罩层</kui-button>
					</kui-container>
				</view>
				<view class="kui-mt-5">
					<kui-text>自定义富文本内容</kui-text>
					<kui-container radius="10px" background-color="#FFFFFF">
						<kui-button type="primary" block @click="showOverlay(0.6, 'richtext')">显示遮罩层</kui-button>
					</kui-container>
				</view>
				<view class="kui-mt-5">
					<kui-text>区间遮罩用法</kui-text>
					<kui-overlay radius-size="sm" :closeOnClickMask="false" :show="true">
						<view class="kui-mt-0">
							<view class="kui-mt-3 kui-p-3 kui-box-border">
								<kui-space :gap="[40,20]">
									<kui-button type="primary">主要按钮</kui-button>
									<kui-button type="info">信息按钮</kui-button>
									<kui-button>默认按钮</kui-button>
									<kui-button type="success">成功按钮</kui-button>
									<kui-button type="warning">警告按钮</kui-button>
									<kui-button type="danger">危险按钮</kui-button>
									<kui-button type="danger" background-color="orange" text-color="black">自定义按钮</kui-button>
								</kui-space>
							</view>
						</view>
					</kui-overlay>
				</view>
				<view class="kui-mt-5">
					<kui-text>磨砂玻璃遮罩用法</kui-text>
					<kui-overlay radius-size="sm" :closeOnClickMask="false" blur :overlay-ness="0.4" :show="true">
						<view class="kui-mt-0">
							<view class="kui-mt-3 kui-p-3 kui-box-border">
								<kui-space :gap="[40,20]">
									<kui-button type="primary">主要按钮</kui-button>
									<kui-button type="info">信息按钮</kui-button>
									<kui-button>默认按钮</kui-button>
									<kui-button type="success">成功按钮</kui-button>
									<kui-button type="warning">警告按钮</kui-button>
									<kui-button type="danger">危险按钮</kui-button>
									<kui-button type="danger" background-color="orange" text-color="black">自定义按钮</kui-button>
								</kui-space>
							</view>
						</view>
					</kui-overlay>
				</view>
			</kui-config-provider>
			<kui-overlay ref="overlay" :overlay-ness="overlayNess"></kui-overlay>
			<kui-overlay :z-index="9999" ref="overlay-content">
				<template v-slot:content>
					<view class="kui-w-full kui-h-full kui-flex kui-justify-center kui-items-center">
						<kui-container height="100px" width="300px" radius="10px" background-color="#FFFFFF">
							<view class="kui-text-center kui-h-full kui-flex kui-flex-col kui-justify-center">
								<kui-text>自定义插槽内容</kui-text>
							</view>
						</kui-container>
					</view>
				</template>
			</kui-overlay>
			<kui-overlay ref="overlay-richtext" :vnode="vnode" vnode-center></kui-overlay>
		</template>
	</kui-page>
</template>

<script lang="ts">
	import {
		SetupContext,
		nextTick,
		getCurrentInstance,
		toRefs,
		reactive
	} from 'vue';
	
	export default {
		setup(props, context: SetupContext) {
			const {proxy} = getCurrentInstance();
			
			const data = reactive({
				overlayNess: 0.6,
				vnode: `
					<div class="kui-h-20 kui-w-60 kui-bg-white kui-rounded kui-flex kui-justify-center kui-items-center">
						<span class="kui-text-red-600">红色富文本内容</span>
						<span class="kui-text-blue-600">蓝色富文本内容</span>
					</div>
				`
			});
			
			const showOverlay = (n: number = 0.6, type: string = '') => {
				nextTick(() =>  {
					data.overlayNess = n;
					if (!type) {
						proxy.$refs['overlay'].open();
					} else if (type === 'content') {
						proxy.$refs['overlay-content'].open();
					} else if (type === 'richtext') {
						proxy.$refs['overlay-richtext'].open();
					}
				})
			}
			
			return {
				showOverlay,
				...toRefs(data)
			}
		}
	}
</script>

<style>

</style>
